import React, { Component } from 'react';
import BarGraph from '../bargraph/BarGraph';
import { Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import CommonConstants from '../../constants/CommonConstants';

/**
 * 詳細：心筋梗塞
 */
class Detail extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { probability } = this.props;
    return (
      <div className="Detail">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.DETAIL}
          customStyle={CommonConstants.SCROLL_Z}
        >
          <div className="report-card">
            <div className="card-content">
              <p className="top-content">
                あなたの生活習慣や健診成績（喫煙・BMI・糖尿病・血圧・コレステロール）を現在のまま続けた場合、今後10年の間に心筋梗塞になる危険度は以下のようになります。
              </p>
              <p>
                同年代・同性で危険度が一番高いグループのものとして表示された危険度は、そのグループの代表的な値であり、それよりも高い危険度があなたの危険度として算出される可能性があります。
              </p>
            </div>

            <div className="card-content">
              <HeadLine
                level={1}
                color={HEAD_LINE_COLOR.ORANGE}
              >
                あなたの心筋梗塞になる危険度
              </HeadLine>
              <div className="risk-bar-graph">
                <BarGraph
                  labelSize="20px"
                  data={[
                    {
                      label: ['同年代・同性で','危険度が一番', '低いグループ'],
                      value: probability.min,
                    },
                    {
                      label: 'あなた',
                      value: probability.you,
                      active: true,
                    },
                    {
                      label: ['同年代・同性で', '危険度が一番', '高いグループ'],
                      value: probability.max,
                    },
                  ]}
                />
              </div>
            </div>
          </div>
        </Scroll>
      </div>
    );
  }
}

/*Detail.propTypes = {
  probability: React.PropTypes.shape({
    you: React.PropTypes.number.isRequired,
    min: React.PropTypes.number.isRequired,
    max: React.PropTypes.number.isRequired,
  }),
};*/

export default Detail
